<?php
/*
Template Name: AONB template
*/

?>

<?php get_header(); ?>

<?php 
    global $post;
    $location_nav = '';
    $i = 0;
    
    $aonb_category  = get_post_meta($post->ID, "aonb_category", true);
    $center_latlon  = get_post_meta($post->ID, "center_latlon", true);
    $map_zoom  = get_post_meta($post->ID, "map_zoom", true);
    
    $myposts = get_posts("category=$aonb_category,-1&numberposts=-1&orderby=date&order=DESC");
    
    $pages = count($myposts);
    $scroller_width = ($pages + 3) * 320; 

    $location_nav .=  '<ul>';
    $location_array .=  'var locations = [';    
    
    foreach($myposts as $post) : 
    
      $entry = get_object_vars($post);
            
      $e_id         = $entry[ID];
      $e_title      = $entry[post_title];

      if (strlen($e_title) > 40 ){
        $e_title    = substr($e_title, 0, 35) . '...';
      }
      
      $description  = get_post_meta($post->ID, "short_description", true);
      $lat_long     = get_post_meta($post->ID, "Coordinates_(lat,_long)", true);
      $loc_icon     = get_post_meta($post->ID, "location_icon", true);
      
      if ($loc_icon == '') {
        $loc_icon = "worldheritagesite.png";
      }
      
      $files = get_children(array('post_parent' => $e_id,'post_status' => 'inherit','post_type' => 'attachment','post_mime_type' => 'image','order' => 'ASC','orderby' => 'menu_order'));
      
      if($files){
        $keys = array_keys($files);
        $num=$keys[0];
        $meta = wp_get_attachment_metadata($num);
        $thumb = wp_get_attachment_thumb_url($num);          
        $fullsize = wp_get_attachment_url($num);
      }
      
      $j = $i + 1;
      
      // fill the location navigation unordered list
      $location_nav .=  '<li id="site_' . $i . '">';
      $location_nav .=  '<a rel="' . $e_id .'" id="' . $i . '" href="' . get_permalink($e_id) . '" title="' . $e_title . '">';
      $location_nav .=  '<span class="location_title"><span class="location_id">' . $j . '</span>' . $e_title . '</span>';
      $location_nav .=  '<img src="' . $thumb . '" alt="' . $e_title . '" width="50" height="50" />';
      $location_nav .=  '<span class="description_text">' .$description .'<span class="location_more_link">View on map...</span></span>';       
      $location_nav .=  '</a>';
      $location_nav .=  '</li>';
            
      if ($j != $pages) {
        // set the location data array for the google maps API 
        $location_array .=  "['$entry[post_title]', $lat_long, $i, '$thumb', '$description', '$loc_icon', '$e_id' ],";             
      } else {
        $location_array .=  "['$entry[post_title]', $lat_long, $i, '$thumb', '$description', '$loc_icon', '$e_id' ]";
      }
              
      $i++;
      
    endforeach;
    
    $location_nav .=  '</ul>';
    $location_array .=  '];';        
?>


<script type="text/javascript">
function initialize() {
  var myOptions = {
    zoom: <?php echo $map_zoom ?>,
    center: new google.maps.LatLng(<?php echo $center_latlon ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  setMarkers(map, locations);
  
/*
   
    var ccr_route = new google.maps.Polyline({
      path: ccr_rourte_cords,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
    
    ccr_route.setMap(map);
    
    */ 

 
}



/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
<?php echo $location_array ?>

function setMarkers(map, locations) {

  // hold the markers in an array
  var gmarkers = [];
  var ccr_rourte_cords = [];
     
  for (var i = 0; i < locations.length; i++) { 
    
    var site = locations[i];
    
    var j = i + 1;

    var image = new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/' + site[6],
        // This marker is 20 pixels wide by 32 pixels tall.
          new google.maps.Size(32.0, 37.0),
          new google.maps.Point(0, 0),
          new google.maps.Point(16.0, 37.0));
    var shadow = new google.maps.MarkerImage('/img/marker-shadow-01.png',
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
          new google.maps.Size(51.0, 37.0),
          new google.maps.Point(0, 0),
          new google.maps.Point(16.0, 37.0));
        // Shapes define the clickable region of the icon.
        // The type defines an HTML &lt;area&gt; element 'poly' which
        // traces out a polygon as a series of X,Y points. The final
        // coordinate closes the poly by connecting to the first
        // coordinate.
    var shape = {
        coord: [1, 1, 1, 30, 30, 30, 30 , 1],
        type: 'poly'
    };      
    
    var myLatLng = new google.maps.LatLng(site[1], site[2]);

    var marker_html = '<div class="map_marker_container">';
    marker_html     = marker_html + '<span class="location_title"><span class="location_id gmap">' + j + '</span>' + site[0] + '</span>';   
    marker_html     = marker_html + '<img class="location_img" src="' + site[4] + '" alt="' + site[0] + '" width="50" height="50" />';
    marker_html     = marker_html + '<p class="map_description">' + site[5] + '<span class="location_more_link"><a class="maps_more_link" href="#primary">Learn More...</a></span></p>';
    marker_html     = marker_html + '<a class="marker_navigation_image" href="#primary"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/marker_navigation_temp_01.png" alt="" /></a>';
    marker_html     = marker_html + '</div>';      

    var title_id = String(j) + '| ' + site[0] + ' |' + site[7];
    
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        title: title_id,
        icon: image,
        shape: shape,
        html: marker_html,
        zIndex: site[3]
    });
    
    // pump the markers into our gmarkers holding array so we can interact with them later
    gmarkers.push(marker);
    
    var infowindow = new google.maps.InfoWindow();    

    google.maps.event.addListener(marker, "click", function () {
        infowindow.setContent(this.html);
        infowindow.open(map, this);
        
        $("#map_overlay").hide();

        var titleSplit = this.title.split("|");
        
        var scroll_distance = (titleSplit[0] - 1) * 320;
        $("#location_nav").scrollTo( scroll_distance, 1000, {axis:'x'} ) 

        $('#primary *').fadeOut(500);
        $('#primary + p').fadeOut(500);
        $('#primary').load('/ajax_loader/?post_id=' + titleSplit[2]);    
        $('#primary + p').fadeIn(1);         
                             
    });

    $('#site_' + i + ' a').click(function() {
      google.maps.event.trigger(gmarkers[$(this).attr("id")], 'click');

  
            
      return false;   
      
    });   

  }

}

</script>

<div id="map_overlay">
  <a id="binevenagh" href="http://ccralive.com/binevenagh-aonb/"></a>
  <a id="antrim-coast" href="http://ccralive.com/antrim-coast-glens-aonb/"></a>
  <a id="causeway-aonb" href="http://ccralive.com/causeway-coast-aonb/"></a>
  <a id="causeway-route" href="http://ccralive.com/"></a>    
</div>
      
<div id="map_canvas"></div>

<div id="location_nav">

  <div id="location_nav_container" style="width:<?php echo $scroller_width ?>px">
  <?php echo $location_nav ?>
  </div>

</div> <!-- [END] #location_nav -->

<div id="scroller_nav">
  
  <div id="left_arrow">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/left_arrow_01.png" alt="" />
  </div>
  
  <div id="reverse_order_container">
    <div id="reverse_order">Londonderry/Derry &raquo; Belfast</div>
  </div>
  
  <div id="right_arrow">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/right_arrow_01.png" alt="" />
  </div>
  
</div>


<div id="primary">

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>		  
      <?php the_content(); ?>
    	<?php edit_post_link( __( 'Edit this entry', 'ccr' ), '<span class="edit-link">', '</span>' ); ?>
    <?php endwhile; ?>          	  

</div> <!-- [END] #primary -->

    
<?php get_footer(); ?>

